<template>
    <div class="content" ref="contentRef" v-bind="$attrs">
      <div class="title" @click="rollbackPath()">Back</div>
      <div class="icon">
        <transition name="fade">
          <img src="@/assets/icon/book.png" alt="/" v-show="controllImg">
        </transition>
      </div>
      <div class="search">
        <a-select value="请输入您想查找的内容!" >
          <a-select-opt-group>
            <template #label>
        <span>
          <user-outlined />
          Manager
        </span>
            </template>
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="Engineer">
            <a-select-option value="Yiminghe">yiminghe</a-select-option>
            <a-select-option value="Yiminghe1">yiminghe1</a-select-option>
          </a-select-opt-group>
        </a-select>
      </div>
    </div>
</template>

<script lang="ts" setup>

import {store} from '@/store/index.ts';
import {storeToRefs} from "pinia";
import {onMounted, ref} from "vue";
import router from "@/router";
import mitter from "@/mitt";

const storeData = store()
const { fontBlue, fontGray, bgColorOne, bgColorTwo, cardTitle, cardBorderColor } = storeToRefs(storeData)
let contentRef = ref()
let controllImg = ref<boolean>(false)
// default主题默认文字颜色
let deafultThemeColor = ref<string>("'#F1F5FDFF'")


onMounted(() => {
  // 监听滚动条
  document.addEventListener('scroll', controlHeaderDisplay, true)
  mitter.on('changeTheme', () => {
    controlHeaderDisplay()
  })
})

const controlHeaderDisplay = () => {
  if (storeData.currentTheme === 'default') {
    if (document.documentElement.scrollTop == 0) {
      contentRef.value.style.backgroundColor = 'rgb(0 96 224 / 1)';
      controllImg.value = false
    }
    if (document.documentElement.scrollTop > 0) {
      contentRef.value.style.backgroundColor = "#fff";
      controllImg.value = true;
    }
  }

  if (storeData.currentTheme == 'dark') {
    if (document.documentElement.scrollTop == 0) {
      contentRef.value.style.backgroundColor = 'rgb(0 96 224 / 1)';
      controllImg.value = false
    }
    if (document.documentElement.scrollTop > 0) {
      contentRef.value.style.backgroundColor = "#000";
      controllImg.value = true;
    }
  }
}

// 回退路径
let rollbackPath = () => {
  router.back()
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 1.32rem;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: all .2s;
  z-index: 1000;

  .title {
    width: 30%;
    font-size: 0.36rem;
    font-weight: bold;
    margin-left: 0.3rem;
    color: #e8e8e8;
    box-sizing: border-box;

  }

  .title:hover {
    cursor: pointer;
    transform: translateX(5%);
    transition: transform .6s;
  }

  .icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1rem;
      width: 1rem;
    }
  }

  .search {
    width: 30%;
    margin-right: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /deep/ .ant-select-selector  {
      width: 6rem;
      background-color: rgba(255, 255, 255, 0.02);
      border-color: #c1c1c1;
      color: #F1F5FDFF;
      transition: all .1s;
    }
  }

  .title::before {
    content: '←';
    font-size: 0.28rem;
    margin-right: 0.1rem;
  }

}

@keyframes imgY {
  0% {
    transform: translateY(0.4rem);
  }
}
@keyframes imgY2 {
  100% {
    transform: translateY(0.1rem);
  }
}
.fade-enter-active {
  animation: imgY .4s;
}
.fade-leave-active {
  animation: imgY2 .06s;
}
</style>